<template>
  <div class="myOrderMain">
    <ul class="titles" @click="goNavTarget">
      <li data-Id="1">
        <div :class="props.isShowIndex == 1 ? 'active' : ''" data-Id="1">
          全部订单
        </div>
      </li>
      <li data-Id="2">
        <div :class="props.isShowIndex == 2 ? 'active' : ''" data-Id="2">
          待付款
        </div>
      </li>
      <li data-Id="3">
        <div :class="props.isShowIndex == 3 ? 'active' : ''" data-Id="3">
          待使用
        </div>
      </li>
      <li data-Id="4">
        <div :class="props.isShowIndex == 4 ? 'active' : ''" data-Id="4">
          待评价{{ props.ToCommentCount }}
        </div>
      </li>
      <li data-Id="5">
        <div :class="props.isShowIndex == 5 ? 'active' : ''" data-Id="5">
          退款/售后
        </div>
      </li>
    </ul>
    <!-- 订单列表 -->
    <ul class="orderList" v-if="MyOrderList.length !== 0">
      <li class="orderItem" v-for="order in MyOrderList" :key="order.orderId">
        <img
          class="goodsImg"
          v-lazy="order.deleteurl"
          alt=""
          @click="toOrderDetail(order)"
        />
        <div class="goodsInfo">
          <h3 class="goodsTitle" @click="toOrderDetail(order)">
            {{ order.title }}
          </h3>
          <p>{{ order.orderinfo[0] }}</p>
          <div>{{ order.orderinfo[1] }}</div>
        </div>
        <span class="total">{{ order.orderinfo[2] }}</span>
        <span class="state">{{ order.showstatus }}</span>
      </li>
    </ul>
    <!-- 无订单显示 -->
    <div v-else class="orderTip">对不起，没有{{ showOrderclass }}的订单</div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "myOrder",
});
</script>

<script setup>
import router from "../../../router";
import { getMyOrderApi } from "@/api/personal";
import { onMounted, ref, defineProps, defineEmits, watch } from "vue";

const MyOrderList = ref([]);

const getMyorderFn = async () => {
  let MyOrder = await getMyOrderApi();
  // 把图片地址进行修改
  // 在没有订单的时候退出
  if (!MyOrder.data) return;
  return MyOrder.data.orders.map((item) => {
    const imgUrls = item.dealpic.split("/w.h/");
    item.deleteurl = imgUrls[0] + "/" + imgUrls[1] + "@190w_106h_1e_1c";
    return {
      ...item,
    };
  });
};
onMounted(async () => {
  // 在监视中做请求数据，并且设置 immediate: true
  // const MyOrderNew = await getMyorderFn();
  // MyOrderList.value = MyOrderNew;
});
const props = defineProps(["isShowIndex", "ToCommentCount"]);
const emit = defineEmits(["orderTarget"]);
const goNavTarget = (e) => {
  // console.log(e.target.dataset.id);
  emit("orderTarget", ["myOrder", e.target.dataset.id]);
};

// 监视index变化，进行重新请求数据
const showOrderclass = ref("");
watch(
  () => props.isShowIndex,
  async () => {
    //页面分类 1：全部订单，2：待付款 3：待使用 4：待评价 5：退款/售后
    // 响应数据状态：已关闭    已退款  已发车    待评价    已评价
    const MyOrderRes = await getMyorderFn();
    if (props.isShowIndex == 1) {
      MyOrderList.value = MyOrderRes;
    } else if (props.isShowIndex == 2) {
      showOrderclass.value = "需要付款";
      const MyOrderNew = MyOrderRes.filter((item) => {
        return item.showstatus === "待付款";
      });
      MyOrderList.value = MyOrderNew;
      console.log(MyOrderList.value);
    } else if (props.isShowIndex == 3) {
      showOrderclass.value = "可使用";
      const MyOrderNew = MyOrderRes.filter((item) => {
        return item.showstatus === "待使用";
      });
      MyOrderList.value = MyOrderNew;
    } else if (props.isShowIndex == 4) {
      showOrderclass.value = "需要评价";
      const MyOrderNew = MyOrderRes.filter((item) => {
        return item.showstatus === "待评价";
      });
      MyOrderList.value = MyOrderNew;
    } else if (props.isShowIndex == 5) {
      showOrderclass.value = "没有退款/售后";
      const MyOrderNew = MyOrderRes.filter((item) => {
        return (
          item.showstatus === "已退款" ||
          item.showstatus === "退款完成" ||
          item.showstatus === "已取消" ||
          item.showstatus === "已发起退款"
        );
      });
      MyOrderList.value = MyOrderNew;
    }
  },
  { immediate: true }
);
// 点击订单请求跳转到订单详情页面
const toOrderDetail = (order) => {
  console.log(order);
  // 里面涵盖了orderDetail链接
  // 例：orderDetail: "https://www.meituan.com/order/view/7799088607"
  // 7799088607为订单ID
  router.push("/orderDetail");
};
</script>
<style lang="less" scoped>
.myOrderMain {
  width: 908px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 20px 20px 0 20px;
  float: right;
  position: relative;
  box-sizing: border-box;
  // 标题
  .titles {
    display: flex;
    font-size: 20px;
    height: 38px;
    border-bottom: 1px solid #ccc;
    li {
      padding-right: 25px;
      div {
        height: 37px;
        padding: 0 5px;
        &.active {
          border-bottom: 2px orange solid;
        }
      }
    }
  }
  // 订单列表
  .orderList {
    .orderItem {
      display: flex;
      padding: 20px 0;
      color: #333;

      .goodsImg {
        height: 90px;
        width: 90px;
        // 图片居中裁剪多余
        object-fit: cover;
        padding-right: 20px;
        cursor: pointer;
      }
      .goodsInfo {
        width: 350px;
        padding-right: 50px;
        .goodsTitle {
          font-weight: normal;
          cursor: pointer;
        }
        p {
          padding: 10px 0;
        }
      }
      .total,
      .state {
        width: 200px;
        height: 90px;
        line-height: 90px;
      }
    }
  }
  .orderTip {
    text-align: center;
    font-size: 16px;
    padding: 50px 0;
  }
}
</style>
